<template>
  <div
    class="app-container home"
    :class="{ colorfff: currentTab == 3 || currentTab == 4 }"
    v-if="userInfo.userName == 'admin'"
  >
    <!-- 接口报错查询 -->
    <div>
      <el-tabs
        v-model="activeName"
        :tab-position="tabPosition"
        style="height: 566px"
        @tab-click="handleClick"
      >
        <el-tab-pane label="今日" name="1"> </el-tab-pane>
        <el-tab-pane label="三天" name="2"></el-tab-pane>
        <el-tab-pane label="一周" name="3"></el-tab-pane>
        <el-table :data="tableData" height="526" border style="width: 100%">
          <el-table-column label="账号" align="center" prop="accountid" />
          <el-table-column label="渠道" align="center" prop="salecode" />
          <el-table-column label="推送结果" align="center" prop="">
            <template #default="{ row }">
              <div v-if="row.successCount == 1" style="color: green">成功</div>
              <div v-if="row.successCount == 0" style="color: red">失败</div>
            </template>
          </el-table-column>
          <el-table-column
            label="错误信息"
            align="center"
            width="200px"
            prop="res"
          />
          <el-table-column label="接口类型" align="center" prop="inter" />
          <el-table-column label="创建时间" align="center" prop="createTime" />
        </el-table>
        <div style="text-align: right; margin-top: 10px">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="form.pageNum"
            :page-sizes="[10, 20, 30, 50, 100]"
            :page-size="form.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import homeApi from "@/api/home/index";
import videosManage from "@/api/PCWebImages/videosManage";
import { gettuisongList } from "@/api/login.js";
import { getUserProfile } from "@/api/system/user";
export default {
  name: "Index",
  data() {
    return {
      loading: false,
      tabsList: [
        {
          name: "商家联盟saas系统",
          value: "1",
        },
        {
          name: "独立版系统",
          value: "2",
        },
        {
          name: "合作商家",
          value: "3",
        },
        {
          name: "系统客户",
          value: "4",
        },
      ],
      currentTab: "1",
      notices: null,
      videosList: [],
      videoListList: [],
      dialogVisible: false,
      currentVideo: null,
      userInfo: {},
      form: {
        pageSize: 10,
        pageNum: 1,
        day: "1",
      },
      tabPosition: "left",
      activeName: "1",
      tableData: [],
      total: 0,
    };
  },
  created() {
    this.getProfile();
    this.getNoticeList();
    this.getvideosManage();
    this.getListAll();
  },
  components: {},
  methods: {
    async getProfile() {
      const res = await getUserProfile();
      console.log(res);
      this.userInfo = res.data;
    },
    handleClick(tab, event) {
      console.log(tab, event);
      this.tableData = [];
      this.form.pageSize = 10;
      this.form.pageNum = 1;
      this.activeName = tab.name;
      this.getListAll();
    },
    //获取数据
    async getListAll() {
      if (this.activeName == "1") {
        this.form.day = "1";
      } else if (this.activeName == "2") {
        this.form.day = "3";
      } else if (this.activeName == "3") {
        this.form.day = "7";
      }
      const res = await gettuisongList(this.form);
      console.log(res);
      this.tableData = res.rows;
      this.total = res.total;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.form.pageSize = val;
      this.getListAll();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.form.pageNum = val;
      this.getListAll();
    },
    // 打开视频
    openVideo(item) {
      this.currentVideo = item;
      this.dialogVisible = true;
    },
    // 获取视频教程列表
    getvideosManage() {
      let obj = {
        systemType: "",
      };
      obj.systemType = this.currentTab;
      videosManage.getList(obj).then((res) => {
        this.videosList = res.rows;
        if (this.currentTab == 1 || this.currentTab == 2) {
          this.setVideoData();
        }
      });
    },
    // 组装视频轮播数据
    setVideoData() {
      let j = 0;
      let arr = [];
      arr[j] = [];
      this.videosList.forEach((item, i) => {
        if (!arr[j]) {
          arr[j] = [];
        }
        arr[j].push(item);
        if ((i + 1) % 4 == 0) {
          j++;
        }
      });
      this.videoListList = arr;
      console.log(
        "%c Line:83 🍊 this.videoListList",
        "color:#e41a6a",
        this.videoListList
      );
    },
    // tab切换
    tabChange() {
      this.getvideosManage();
    },
    getNoticeList() {
      homeApi
        .getNoticeList({
          status: 0,
          noticeType: "2",
        })
        .then((res) => {
          console.log(
            "%c 🍸 res: ",
            "font-size:20px;background-color: #E41A6A;color:#fff;",
            res
          );
          if (res.rows && res.rows.length) {
            this.notices = res.rows[0];
          }
        });
    },
  },
};
</script>

<style scoped lang="scss">
.app-container {
  min-width: 940px;
  max-width: 1720px;
  background-color: #f8f8f8;
  padding-bottom: 50px;
  color: #2c2c2c;
  position: relative;

  &.colorfff {
    background-color: #fff;
  }
}
.pcUrl {
  // height: 20px;
  // width: 200px;

  position: absolute;
  top: 30px;
  right: 30px;
  z-index: 99;
  color: #409eff;
  cursor: pointer;
  a {
    text-decoration: underline;
    color: #409eff;
  }
}

.banner {
  width: 100%;
  margin-bottom: 20px;

  img {
    width: 100%;
  }
}

.videos-box,
.msg-box {
  width: 98%;
  margin: 0 auto;
  margin-bottom: 20px;
  border-radius: 10px;

  background-color: #fff;

  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15);
}

.title-box {
  font-size: 24px;
  height: 50px;
  border-bottom: 1px solid #e1e1e1;
  align-items: center;
  margin-bottom: 10px;
  padding-left: 20px;

  .icon {
    width: 40px;
    height: 40px;
    background: url("/static/icon/Frame 18.png") 100% 100%;
    margin-right: 10px;
  }
}

.carousel-item-box {
  padding: 40px 0;

  > div {
    width: calc(100% - 120px);
    margin: 0 auto;
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
  }

  .img-box {
    width: 25%;
    position: relative;
    .zhezhao {
      width: calc(100% - 20px);
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      position: absolute;
      left: 10px;
      top: 0;
      border-radius: 10px;
    }
    .videoTit {
      position: absolute;
      width: 100%;
      text-align: center;
      bottom: 10px;
      left: 0;
      font-size: 18px;
      color: #fff;
      z-index: 9;
    }
    .play-icon {
      font-size: 40px;
      position: absolute;
      color: #fff;
      left: calc(50% - 20px);
      top: calc(50% - 20px);
      z-index: 9;
      cursor: pointer;
    }

    img {
      display: block;
      width: calc(100% - 20px);
      margin: 0 auto;
      height: 201px;
      border-radius: 10px;
      cursor: pointer;
    }
  }
}

.msg-box {
  height: 125px;
  margin-top: 30px;
  padding: 20px;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: space-between;

  .icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: url("/static/icon/Frame 19.png") 100% 100%;
  }

  .tit {
    font-size: 24px;
    line-height: 30px;
  }

  .txt {
    line-height: 30px;
  }

  .msg-txt {
    width: 88%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-wrap: nowrap;
    align-items: center;
    .titt {
      margin-left: 10px;
    }
  }

  .rt {
    font-size: 30px;
  }
}

.imgs-box {
  img {
    width: 184px;
    height: 184px;
    border-radius: 12px 12px 12px 12px;
    margin-right: 30px;
    margin-bottom: 40px;
  }
}

.video-box {
  width: 100%;
  height: auto;
}

.app-container ::v-deep .el-tabs__item.is-active {
  padding-left: 20px;
  color: #fff;
  text-align: center;
  background: #409eff;
  border-radius: 8px 8px 0px 0px;
  opacity: 1;
}

.accountView {
  width: 100%;
  height: 500px;
}

::v-deep .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
  padding-left: 20px;
}

::v-deep .el-tabs__nav-wrap::after {
  background-color: #409eff;
}

::v-deep .el-tabs__item {
  color: #409eff;
  font-size: 24px;
}

::v-deep .el-carousel__arrow {
  background-color: #c1c1c1;
}

::v-deep .el-carousel__arrow:hover {
  background-color: #409eff;
}

::v-deep .el-tabs--top .el-tabs__item.is-top:last-child {
  padding-right: 20px;
}

::v-deep .el-tabs__item {
  margin-bottom: 30px;
  margin-right: 10px;
}

.order_total {
  margin-top: 33px;
}

.dingdan_box {
  width: 666px;
  margin-bottom: 33px;
  margin-left: 12px;
}

.order_title {
  margin-bottom: 10px;
  font-size: 16px;
  span {
    padding: 2px 3px;
    margin-right: 10px;
    border-radius: 3px;
    font-weight: 600;
    background-color: #91cc75;
  }
}
</style>
